<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promise方法介绍</title>
</head>

<body>
  <script>
    // 声明两个Promise对象
    const p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("我是第一个商品数据");
      }, 500);
    })

    const p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        // resolve("我是第二个商品数据");
        // 尝试有一个Promise返回失败
        reject("我失败了");
      }, 1000);
    })

    // 1.all() 接收一个可迭代对象(数组,具有iterator接口)为参数, 且其元素必须是一个Promise对象
    // 返回一个结果数组按照参数顺序返回, 等待数组内的Promise全部完成且都成功, 才会返回最终状态
    // TODO: 但是需要注意一旦其中有一个元素的Promise返回失败, 那么最终结果就是失败, 且返回值为此Promise对象返回值
    const allP = Promise.all([p1, p2]);
    console.log("all", allP);

    // 2.allSettled 参数与返回值与all方法基本一致
    // 不同点在于 allSettled 就算失败了也会把每一个元素Promise返回值返回出来 成功返回value(成功值) 失败返回reason(原因)
    const allSettledP = Promise.allSettled([p1, p2]);
    console.log("allSettled", allSettledP);

    // 3.race() 参数与all方法基本一致
    // 返回值就如其名 赛跑 数组中哪一个Promise返回快 返回谁的状态与返回值
    const raceP = Promise.race([p1, p2]);
    console.log("race", raceP);
  </script>
</body>

</html>